Livewire, GitHub & Deployment

Peta Materi Bab 12

Tujuh bagian yang akan membawamu dari menulis komponen interaktif sampai aplikasi tampil online di internet.

Apa itu Laravel Livewire?

Analogi: Bayangkan kamu mengisi formulir di kertas. Cara lama (tanpa Livewire) seperti harus memfotokopi ulang seluruh kertas setiap kali menulis satu huruf. Livewire seperti pulpen ajaib — kamu cukup menulis, halaman langsung berubah tanpa di-fotokopi ulang.

Livewire = framework full-stack untuk Laravel yang membuat antarmuka dinamis & interaktif hanya dengan PHP — tanpa harus mahir JavaScript.

Membuat Komponen Livewire

Komponen Livewire terdiri dari 2 file: class PHP (logika) & file blade (tampilan). Buat keduanya sekaligus dengan satu perintah artisan.

# Membuat komponen ProductTable
php artisan make:livewire ProductTable

# Menghasilkan 2 file:
# app/Livewire/ProductTable.php
# resources/views/livewire/product-table.blade.php

namespace App\Livewire;

use Livewire\Component;

class ProductTable extends Component
{
    public $search = '';

    public function render()
    {
        return view('livewire.product-table');
    }
}

Pasang di halaman blade cukup dengan: <livewire:product-table />

☝️ Livewire Lifecycle: inilah siklus yang berputar setiap kali user berinteraksi.

Reactive UI & Realtime Search

Ketik di kotak pencarian → daftar langsung tersaring tanpa tombol "cari". Coba demo langsung di bawah! 👇

<input type="text"
   wire:model.live="search"
   placeholder="Cari produk...">

<ul>
  @foreach($products as $p)
    <li>{{ $p->nama }}</li>
  @endforeach
</ul>

Dynamic Form, Filter & Dashboard

Livewire memudahkan form yang validasinya hidup, filter realtime, dan dashboard yang angkanya berubah otomatis.

public $rules = [
    'nama'  => 'required|min:3',
    'harga' => 'required|numeric',
];

// dashboard auto-refresh tiap 5 detik
<div wire:poll.5s> Total Order: {{ $totalOrder }} </div>

Pagination di Livewire

Data ribuan baris? Bagi menjadi halaman-halaman kecil. Livewire menyediakan pagination yang berpindah tanpa reload.

use Livewire\WithPagination;

class ProductTable extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.product-table', [
            'products' => Product::paginate(10),
        ]);
    }
}

Git Fundamental

Analogi: Git seperti tombol "save game". Setiap commit adalah titik simpan yang bisa kamu kembali ke sana kapan saja kalau ada yang rusak.

Git Branch & Merge

Branch = jalur kerja terpisah. Kamu bisa bereksperimen di branch feature tanpa merusak main, lalu merge bila sudah siap.

git checkout -b feature/login   # buat & pindah ke branch baru
git add . && git commit -m "tambah fitur login"
git checkout main             # kembali ke main
git merge feature/login        # gabungkan!

GitHub Workflow

Analogi: GitHub itu "Google Drive-nya developer" — tempat menyimpan kode di awan, berbagi dengan tim, dan menyimpan seluruh riwayat perubahan.

Open Source & Pull Request Flow

Cara berkontribusi ke proyek orang lain: fork → ubah → pull request. Pemilik proyek lalu me-review & menggabungkan kontribusimu.

Deployment: Shared vs VPS vs Cloud

Analogi tempat tinggal: arahkan kursor ke kartu untuk melihat detail (kartu berputar 🔄).

Domain, DNS & SSL

Domain = alamat (mis. tokoku.com). DNS = buku telepon internet yang menerjemahkan nama jadi alamat IP. SSL = gembok 🔒 yang membuat https aman.

Laravel Production Setup

Sebelum aplikasi tampil ke publik, jalankan checklist ini. Klik tiap item untuk menandai selesai ✓

# .env produksi
APP_ENV=production
APP_DEBUG=false

# perintah optimasi sekali jalan
php artisan optimize
php artisan config:cache
php artisan route:cache
php artisan view:cache

# jalankan antrian & link storage
php artisan storage:link
php artisan queue:work --daemon

Debugging & Monitoring

Saat aplikasi error di production, log adalah mata-mata kita. Laravel menyimpan semua kejadian di storage/logs/laravel.log.

[2026-06-05 09:12:01] production.INFO: User login berhasil id=42
[2026-06-05 09:14:33] production.WARNING: Cache miss pada produk populer
[2026-06-05 09:15:10] production.ERROR: SQLSTATE[42S02] Table 'orders' not found
[2026-06-05 09:15:10] production.ERROR:   at OrderController.php:58

Maintenance & Security Update

Aplikasi yang live butuh perawatan rutin, sama seperti motor butuh servis berkala. 🔧

# aktifkan mode maintenance saat update
php artisan down
git pull origin main
composer install --no-dev
php artisan migrate --force
php artisan up   # kembali online

Final Project Semester 2

Pilih SATU proyek untuk membuktikan semua skill semester 2. Arahkan kursor ke kartu — efek 3D tilt aktif! ✨

⭐ Wajib pakai: Laravel Livewire Git/GitHub Deployment online

📝 Tugas 1 — Git Challenge

Buktikan kamu menguasai alur kerja Git & GitHub dari nol hingga merge.

📝 Tugas 2 — Livewire Realtime Search

Buat komponen Livewire pencarian realtime sederhana yang menyaring daftar saat diketik.

📝 Tugas 3 — Deployment Task

Deploy aplikasi Laravel ke hosting gratis (Railway atau Render) hingga bisa diakses lewat URL publik.